<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01_HelloWorld</title>
  </head>
  <body>
    <!--
      1. 引入Vue.js
      2. 创建Vue对象
        el : 指定根element(选择器)
        data : 初始化数据(页面可以访问)
      3. 双向数据绑定 : v-model
      4. 显示数据 : {{xxx}}
      5. 理解vue的mvvm实现
    -->
    <!-- 模板页面 -->
    <div id="root">
      <input type="text" v-model="msg" />
      <input type="text" value="hello vue" />
      <!-- 插值语法 或 双大括号表达式 -->
      <h1>{{ msg }}</h1>
      <!-- 不行 -->
      <!-- <div v-model="msg"></div> -->
      <!-- <h1>{{ count > 5 ? 'aaa' : 'bbb' }}</h1> -->
      <!-- 不行 -->
      <!-- <h1>{{ a }}</h1> -->
    </div>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    <script>
      /*
        模板页面
          模板语法：
            1. 插值语法（双大括号表达式）
              - 语法：{{ JS表达式 }}
              - 作用：用来动态展示js数据（可以展示data、methods、computed等）
              （不能展示全局变量）

              表达式和语句区别：
                表达式  
                  有返回值（可以是undefined）
                  没有分号
                语句
                  没有返回值
                  有分号（可以省略）
                
                function fn() {}    // 语句
                const fn = () => {} // （函数表达式）语句
                fn    // 表达式
                fn()  // 表达式
                fn(); // 语句 
                if (true) {} // 语句
                a > 1 ? true : false // 表达式

            2. 指令语法（作为标签属性使用）
              v-model="JS表达式"
              作用：用来双向数据绑定
              一般给表单项设置（input、textarea、select、radio..）

              MVVM
                M - Model 数据层  （data、methods、computed...）
                V - View  视图层 (模板页面)
                VM - ViewModel （Vue底层做的一些事情）
                  数据绑定： 数据层 -> 视图层 （设置元素的value、textContent）
                  DOM监听： 视图层 -> 数据层 （给元素绑定input事件，事件触发时会更新数据层的数据）
      */
      const a = 123;

      const vm = new Vue({
        // 配置对象：属性名固定的对象
        el: "#root", // element 元素：挂载的元素（内部通过querySelector获取）
        data: {
          // 状态数据
          msg: "hello vue",
          count: 10,
        },
      });

      console.log(vm);
    </script>
  </body>
</html>
